<template>
    <a-modal v-model:visible="editShowModal" title="编辑" okText="更新" :cancelText="[]" @ok="handleOk" style="width: 45%;"
        :ok-button-props="{ disabled: disabled }" :maskClosable="false">
        <div style="height: 500px;overflow-y: scroll;padding:0 50px;">
            <a-descriptions layout="vertical" bordered>
                <a-descriptions-item style="width: 50%;">
                    <div v-for="(item, key, i) in datakey" class="showModelData_item">
                        <span>{{ item.label }}</span>
                    </div>
                </a-descriptions-item>
                <a-descriptions-item>
                    <template v-for="(item, key, i) in dataval" :key="key">
                        <a-input v-if="i === 0 || i === 1 || i === 2" v-model:value="dataval[key]" disabled />

                        <a-input v-if="i !== 0 && datatype[i] === 'IntegerField' || datatype[i] === 'FloatField'"
                            type="number" v-model:value="dataval[key]" min="0" defaultValue="0" />

                        <a-input
                            v-if="i !== 0 && datatype[i] === 'CharField' || datatype[i] === 'TextField' || datatype[i] === 'ListField' || datatype[i] === 'ChoiceField'"
                            type="text" v-model:value="dataval[key]" />
                    </template>
                </a-descriptions-item>
            </a-descriptions>
        </div>
    </a-modal>
</template>

<script>
export default {
    name: "dataEdit",
};
</script>
<script setup>
import { ref, watch, onMounted } from "vue";
import { getDataList, getData, dataEdit } from '@api/data.js'
import { message } from "ant-design-vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter()
const dataval = ref([])
const datakey = ref([])
const editShowModal = ref(false)
const _id = ref()
const props = defineProps(['type', 'typeId'])
const type = ref(props.type)
const typeId = ref(props.typeId)
// 点击更新后执行
function handleOk() {
    for (let key in dataval.value) {
        if (dataval.value[key] === '') {
            dataval.value[key] = null
        }
    }
    dataEdit(type.value, _id.value, dataval.value).then(res => {
        message.success('修改成功')
        editShowModal.value = false
        handleCheck(typeId.value)
    })
}
const datatype = ref([])
// 获取数据
function handleEdit() {
    // disabled.value = true
    editShowModal.value = true
    console.log(type.value, typeId.value)
    getData(type.value, 'OPTIONS', typeId.value).then(res => {
        _id.value = typeId.value
        datakey.value = res.data.fields
        for (const key in datakey.value) {
            datatype.value.push(datakey.value[key].type)
        }
    }).catch(err => {
        message.error('获取失败')
    })
    getData(type.value, 'GET', typeId.value).then(res => {
        dataval.value = res.data
    }).catch(err => {
        message.error('数据异常')
    })
}

watch(props, (newVal) => {
    typeId.value = newVal.typeId
    type.value = newVal.type
    console.log(type.value, typeId.value, 'watch')
},
    { immediate: true, deep: true })
defineExpose({
    editShowModal,
    handleEdit,
    datatype
})
</script>

<style lang="less" scoped>
.showModelData_item {
    width: 100%;
    text-align: center;
    padding: 5px;
}

.showModelData_item:nth-child(odd) {
    background-color: rgb(240, 240, 240);
}


::v-deep .ant-descriptions-item-content {
    padding: 0 !important;
}
</style>